<template>
  <div class="loginlog">
    <div class="allsearch">
      <section class="search-content">
        <el-row :gutter="4" type="flex" justify="start">
          <el-col :span="24">
            <el-select v-model="listQuery.searchType" style="width:120px;">
              <el-option v-for="item in searchTypes" :key="item.value" :value="item.value" :label="item.label"/>
            </el-select>
            <el-input v-model="listQuery.searchValue" style="width:220px;" placeholder="关键词" @keyup.enter.native="handleFilter"/>
            <el-date-picker
              v-model="listQuery.daterange"
              value-format="yyyy-MM-dd"
              :picker-options="picker"
              type="daterange"
              align="right"
              unlink-panels
              range-separator="|"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              style="width:300px"
              @change="handleFilter"
            />
            <el-button type="primary" size="medium" @click="handleFilter">搜索</el-button>
            <el-button size="medium" type="info" @click="clearParams">清空</el-button>
          </el-col>
        </el-row>
      </section>
    </div>

    <el-table :data="loginLogList" border fit highlight-current-row style="width: 100%;margin-top:15px;">
      <el-table-column min-width="10%" align="center" label="用户名">
        <template slot-scope="scope">
          <span>{{ scope.row.loginName }}</span>
        </template>
      </el-table-column>
      <el-table-column min-width="15%" align="center" label="登录时间ip">
        <template slot-scope="scope">
          <span>{{ scope.row.loginTimeTimeStr }}</span>
          <p style="margin:0;color:#999;font-size:12px;">{{ scope.row.loginIp }}</p>
        </template>
      </el-table-column>

      <el-table-column min-width="10%" align="center" label="查看记录">
        <template slot-scope="scope">
          <el-button type="primary" @click="handleClick(scope.row)">查看</el-button>
        </template>
      </el-table-column>
    </el-table>
    <pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @handleSizeChange="handleSizeChange" @handleCurrentChange="handleCurrentChange"/>

    <el-dialog :visible.sync="dialog.show" :title="dialog.logName" width="580px">
      <el-table :data="dialog.loginLogDetailList" border fit highlight-current-row style="width: 100%">
        <el-table-column min-width="10%" align="center" label="登录时间">
          <template slot-scope="scope">
            <span>{{ scope.row.loginTimeTimeStr }}</span>
          </template>
        </el-table-column>
        <el-table-column min-width="10%" align="center" label="登录ip">
          <template slot-scope="scope">
            <span>{{ scope.row.loginIp }}</span>
          </template>
        </el-table-column>
      </el-table>
      <pagination v-show="dialog.total>0" :total="dialog.total" :page.sync="dialog.page" :limit.sync="dialog.limit" @handleSizeChange="dialogHandleSizeChange" @handleCurrentChange="dialogHandleCurrentChange"/>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialog.show = false">关 闭</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import Pagination from '@/components/Pagination' // 分页组件
  import {findByUserName, getEduxcloudLoginLogPager} from '@/api/user/user'
  import {getTenantId} from '@/utils/auth'

  export default {
    components: {Pagination},
    data() {
      return {
        loginLogList: null,
        total: 0,
        listLoading: true,
        listQuery: {
          daterange: [],
          searchType: 'nickName',
          searchValue: '',
          startDate: '',
          endDate: '',
          page: 1,
          limit: 20
        },
        searchTypes: [
          {label: '用户名', value: 'nickName'}
        ],
        picker: {
          shortcuts: [{
            text: '最近一周',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', [start, end])
            }
          }, {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit('pick', [start, end])
            }
          }, {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit('pick', [start, end])
            }
          }]
        },
        dialog: {
          show: false,
          page: 1,
          limit: 5,
          total: 0,
          loginName: '',
          c: '',
          loginLogDetailList: null
        }
      }
    },
    created() {
      this.getLoginLogListData()
    },
    methods: {
      // 改变分页页数
      handleSizeChange(val) {
        this.listQuery.page = 1;
        this.listQuery.limit = val.value;
        this.getLoginLogListData()
      },
      // 改变当前页
      handleCurrentChange(val) {
        this.listQuery.page = val.value;
        this.getLoginLogListData()
      },
      // 分页数据获取
      getLoginLogListData() {
        let params = {};
        if (this.listQuery.daterange !== undefined && this.listQuery.daterange != null) {
          params.startDate = this.listQuery.daterange[0];
          params.endDate = this.listQuery.daterange[1]
        }
        params.searchType = this.listQuery.searchType;
        params.searchValue = this.listQuery.searchValue;
        params.page = this.listQuery.page;
        params.limit = this.listQuery.limit;
        params.tenantId = getTenantId();
        console.log('startDate:' + params.startDate);
        console.log('endDate:' + params.endDate);
        getEduxcloudLoginLogPager(params).then(response => {
          this.loginLogList = response.data.items;
          this.total = response.data.total
        })
      },
      // 数据检索
      handleFilter() {
        this.getLoginLogListData()
      },
      clearParams() {
        this.listQuery.daterange = [];
        this.listQuery.searchType = '';
        this.listQuery.searchValue = '';
        this.listQuery.startDate = '';
        this.listQuery.endDate = '';
        this.getLoginLogListData()
      },
      // 查看按钮
      handleClick(row) {
        this.dialog.show = true;
        this.dialog.loginName = row.loginName;
        this.dialog.logName = row.loginName + '的日志';
        this.getLoginLogDetailList()

      },
      getLoginLogDetailList() {
        var params = {};
        params.page = this.dialog.page;
        params.limit = this.dialog.limit;
        params.loginName = this.dialog.loginName;
        findByUserName(params).then(res => {
          this.dialog.loginLogDetailList = res.data.items;
          this.dialog.total = res.data.total
        })
      },
      // 改变分页页数
      dialogHandleSizeChange(val) {
        this.dialog.page = 1;
        this.dialog.limit = val.value;
        this.getLoginLogDetailList()
      },
      // 改变当前页
      dialogHandleCurrentChange(val) {
        this.dialog.page = val.value;
        this.getLoginLogDetailList()
      }
    }
  }
</script>

<style lang="scss">
  .loginlog {
    .allsearch {
      margin-top: 0;
      padding: 0;

      .search-content {
        width: 100%;
      }
    }

    .el-dialog {
      border-radius: 6px;
    }
  }
</style>
